<template>
  <div class="revset">
    <PageHeader @back="$router.go(-1)" subTitle="返回">
      查看参保方案
    </PageHeader>

    <a-layout>
      <a-row style="width: 100%; text-align: center; margin-top: 20px">
        <span style="font-weight: 800; font-size: 18px">
          {{ progName }}-{{ socCityName }}({{ onlySocAmount ? "仅设置参保金额" : "设置参保金额和比例" }})</span
        >
      </a-row>
      <a-row style="width: 100%; text-align: center; margin-top: 10px">
        <span style="font-weight: 400; font-size: 14px; margin-right: 10px"> 缴扣日期：每月{{ deductionsDate }}日 </span>
        <span style="font-weight: 400; font-size: 14px; margin-left: 10px"> 开始使用时间：{{ getDateForm(userDate) }} </span>
      </a-row>
      <div class="header-title-box">
        <div class="headerTitle">
          <div class="block" />
          <div class="title-info">社保</div>
        </div>
        <div class="btn-box">
          <a-button
            v-if="!isContainByString('contractAdmin')"
            icon="plus"
            type="primary"
            class="mr12"
            style="margin-right: 12px"
            @click="buCha"
          >
            补差
          </a-button>
          <a-button style="margin-right: 12px" @click="deleteMethod">
            删除
          </a-button>
          <a-button type="primary" ghost @click="handleEdit">编辑</a-button>
        </div>
      </div>
      <!-- 社保 -->
      <a-row>
        <a-table :data-source="getSheBao(1)" :pagination="false" row-key="id" :columns="onlySocAmount ? columnsOnlySoc : columns">
          <span slot="cardinalityDefault" slot-scope="text, record">{{ onlySocAmount ? record.cardinalityDefaultAmount : text }}</span>
          <span slot="amountCompany" slot-scope="text, record">{{ getCompanyAmount(groupItemDefault, record) }}</span>
          <span slot="amountPersonal" slot-scope="text, record">{{ getPersonAmount(GgroupItemDefault, record) }}</span>
          <span slot="persentCompany" slot-scope="text, record">{{ record.persentCompany }}%</span>
          <span slot="persentPersonal" slot-scope="text, record">{{ record.persentPersonal }}%</span>
          <span slot="mantissaProcCompany" slot-scope="text, record">{{ getMantissa(record.mantissaProcCompany) }}</span>
          <span slot="mantissaProcPersonal" slot-scope="text, record">{{ getMantissa(record.mantissaProcPersonal) }}</span>
        </a-table>
        <div class="header-title-box" style="margin-top:70px">
          <div class="headerTitle">
            <div class="block" />
            <div class="title-info">医保</div>
          </div>
        </div>
        <a-table :data-source="getSheBao(3)" :pagination="false" row-key="id" :columns="onlySocAmount ? columnsOnlySoc : columns">
          <span slot="cardinalityDefault" slot-scope="text, record">{{ onlySocAmount ? record.cardinalityDefaultAmount : text }}</span>
          <span slot="amountCompany" slot-scope="text, record">{{ getCompanyAmount(groupItemDefault, record) }}</span>
          <span slot="amountPersonal" slot-scope="text, record">{{ getPersonAmount(GgroupItemDefault, record) }}</span>
          <span slot="persentCompany" slot-scope="text, record">{{ record.persentCompany }}%</span>
          <span slot="persentPersonal" slot-scope="text, record">{{ record.persentPersonal }}%</span>
          <span slot="mantissaProcCompany" slot-scope="text, record">{{ getMantissa(record.mantissaProcCompany) }}</span>
          <span slot="mantissaProcPersonal" slot-scope="text, record">{{ getMantissa(record.mantissaProcPersonal) }}</span>
        </a-table>

        <div class="totalBox">
          <div class="company">
            <span class="text">社保单位总计：</span>
            <span class="number">{{ getCompanyAll() }}</span>
          </div>
          <div class="person">
            <span class="text">社保个人总计：</span>
            <span class="number">{{ getPersonAll() }}</span>
          </div>
        </div>
      </a-row>
      <!-- 公积金 -->
      <a-row v-if="!jijinShow">
        <a-row class="header-title">
          <div class="title-info">公积金</div>
        </a-row>
        <a-row>
          <a-table :data-source="jijin" :pagination="false" row-key="id" :columns="onlySocAmount ? columnsOnlySoc : columns">
            <span slot="cardinalityDefault" slot-scope="text, record">{{ onlySocAmount ? record.cardinalityDefaultAmount : text }}</span>

            <span slot="amountCompany" slot-scope="text, record">{{ getCompanyAmount(groupItemDefault2, record) }}</span>
            <span slot="amountPersonal" slot-scope="text, record">{{ getPersonAmount(GgroupItemDefault2, record) }}</span>

            <span slot="persentCompany" slot-scope="text, record">{{ record.persentCompany }}%</span>
            <span slot="persentPersonal" slot-scope="text, record">{{ record.persentPersonal }}%</span>
            <span slot="mantissaProcCompany" slot-scope="text, record">{{ getMantissa(record.mantissaProcCompany) }}</span>
            <span slot="mantissaProcPersonal" slot-scope="text, record">{{ getMantissa(record.mantissaProcPersonal) }}</span>
          </a-table>
          <div class="totalBox">
            <div class="company">
              <span class="text">公积金单位总计：</span>
              <span class="number">{{ getPfCompanyAll() }}</span>
            </div>
            <div class="person">
              <span class="text">公积金个人总计：</span>
              <span class="number">{{ getPfPersonAll() }}</span>
            </div>
          </div>
        </a-row>
      </a-row>
      <a-divider dashed />
      <a-row>
        <div class="totalBox">
          <div class="company">
            <span class="text">单位总计：</span>
            <span class="number">{{ getPfCompanyAll2() }}</span>
          </div>
          <div class="person">
            <span class="text">个人总计：</span>
            <span class="number">{{ getPfPersonAll2() }}</span>
          </div>
        </div>
      </a-row>
    </a-layout>
  </div>
</template>

<script>
import { findSocProgRelation, deleteSocProgs } from "@/api/shebao/shebaoMethod.js";
import { isContainByString } from "@/utils/index";
const columns = [
  {
    dataIndex: "itemName",
    key: "itemName",
    title: "项目"
  },
  {
    title: "个人缴纳基数",
    dataIndex: "cardinalityDefault",
    key: "cardinalityDefault",
    scopedSlots: { customRender: "cardinalityDefault" }
  },
  {
    title: "单位缴纳比例",
    key: "persentCompany",
    dataIndex: "persentCompany",
    scopedSlots: { customRender: "persentCompany" }
  },
  {
    title: "个人缴纳比例",
    key: "persentPersonal",
    dataIndex: "persentPersonal",
    scopedSlots: { customRender: "persentPersonal" }
  },
  {
    title: "单位尾数处理",
    key: "mantissaProcCompany",
    dataIndex: "mantissaProcCompany",
    scopedSlots: { customRender: "mantissaProcCompany" }
  },
  {
    title: "个人尾数处理",
    key: "mantissaProcPersonal",
    dataIndex: "mantissaProcPersonal",
    scopedSlots: { customRender: "mantissaProcPersonal" }
  },
  {
    title: "单位金额",
    dataIndex: "amountCompany",
    key: "amountCompany",
    scopedSlots: { customRender: "amountCompany" }
  },
  {
    title: "个人金额",
    dataIndex: "amountPersonal",
    key: "amountPersonal",
    scopedSlots: { customRender: "amountPersonal" }
  }
];
const columnsOnlySoc = [
  {
    dataIndex: "itemName",
    key: "itemName",
    title: "项目"
  },
  {
    title: "个人缴纳基数",
    dataIndex: "cardinalityDefault",
    key: "cardinalityDefault",
    scopedSlots: { customRender: "cardinalityDefault" }
  },
  {
    title: "单位金额",
    dataIndex: "amountCompany",
    key: "amountCompany",
    scopedSlots: { customRender: "amountCompany" }
  },
  {
    title: "个人金额",
    dataIndex: "amountPersonal",
    key: "amountPersonal",
    scopedSlots: { customRender: "amountPersonal" }
  },
  {
    title: "单位尾数处理",
    key: "mantissaProcCompany",
    dataIndex: "mantissaProcCompany",
    scopedSlots: { customRender: "mantissaProcCompany" }
  },
  {
    title: "个人尾数处理",
    key: "mantissaProcPersonal",
    dataIndex: "mantissaProcPersonal",
    scopedSlots: { customRender: "mantissaProcPersonal" }
  }
];
export default {
  data() {
    return {
      isContainByString,
      columns,
      columnsOnlySoc,
      jijin: [
        {
          id: 0,
          itemType: 2,
          itemName: "公积金",
          cardinalityDefault: "",
          persentCompany: "",
          persentPersonal: "",
          comLastDeal: "四舍五入到分",
          personLastDeal: "四舍五入到分",
          amountCompany: "",
          amountPersonal: "",
          comFixed: "--",
          personFixed: "--",
          sort: 5
        }
      ],
      shebao: [],
      // 社保
      groupItemDefault: 0,
      GgroupItemDefault: 0,
      // 公积金
      groupItemDefault2: 0,
      GgroupItemDefault2: 0,
      progId: "",
      progName: "",
      jijinShow: true,
      socCityName: "",
      onlySocAmount: false,
      deductionsDate: 1,
      userDate: 0
    };
  },

  created() {
    if (this.$route.query.id) {
      this.progId = this.$route.query.id;
      this.toInquire();
    }
  },
  methods: {
    getSheBao(index) {
      console.log(this.shebao);
      if (index === 1) {
        var tempShebao = [];
        for (var i in this.shebao) {
          // 遍历数组
          if (this.shebao[i].itemType === 1) {
            tempShebao.push(this.shebao[i]);
          }
        }
        return tempShebao;
      } else {
        var tempYibao = [];
        for (var j in this.shebao) {
          // 遍历数组
          if (this.shebao[j].itemType === 3) {
            tempYibao.push(this.shebao[j]);
          }
        }
        return tempYibao;
      }
    },
    getDateForm(value) {
      const date = new Date(value);
      const y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;

      return y + "年" + MM + "月" + d + "日";
    },
    getPfCompanyAll2() {
      let g = 0;
      if (this.getCompanyAll() + "".length >= this.getPfCompanyAll() + "".length) {
        g = this.groupItemDefault;
      } else {
        g = this.groupItemDefault2;
      }
      console.log(this.getCompanyAll() + "----" + this.getPfCompanyAll());
      return this.calculationDot(g, NP.strip(parseFloat(this.getCompanyAll()) + parseFloat(this.getPfCompanyAll())));
    },
    getPfPersonAll2() {
      let g = 0;
      if (this.getPersonAll() + "".length >= this.getPfPersonAll() + "".length) {
        g = this.GgroupItemDefault;
      } else {
        g = this.GgroupItemDefault2;
      }
      console.log(this.getPersonAll() + "/" + this.getPfPersonAll());
      return this.calculationDot(g, NP.strip(parseFloat(this.getPersonAll()) + parseFloat(this.getPfPersonAll())));
    },

    // 删除方案跳出modal框
    deleteMethod() {
      var that = this;
      this.$confirm({
        title: "删除方案",
        content: "确认删除方案？",
        onOk() {
          const data = {
            id: that.progId
          };
          deleteSocProgs(data)
            .then(res => {
              that.$router.push({
                name: that.isContainByString("contractAdmin") ? "shebaoMethodAdmin" : "shebaoMethod"
              });
            })
            .catch(err => {
              console.log("debug log --> ", err);
            });
        }
      });
    },
    // 点击进入编辑页面
    handleEdit() {
      this.$router.push({
        path: `/${this.isContainByString("contractAdmin") ? "contractAdmin" : "shebao"}/shebaoMethod/editMethod`,
        query: {
          id: this.progId
        }
      });
    },
    buCha() {
      // 进入补差界面
      this.$router.push({
        path: "/shebao/shebaoMethod/buCha2",
        query: {
          id: this.progId,
          empSocInfoId: this.empSocInfoId
        }
      });
    },
    getMantissa(value) {
      switch (value) {
        case 0:
          return "不处理";
        case 1:
          return "四舍五入到元";
        case 2:
          return "四舍五入到角";
        case 3:
          return "四舍五入到分";
        case 4:
          return "四舍五入到厘";
        case 5:
          return "四舍五入到小数点后4位";
        case 6:
          return "见厘进分";
        case 7:
          return "见分进角";
        case 8:
          return "见角进元";
        case 9:
          return "见角舍去";
        case 10:
          return "见分舍去";
        case 11:
          return "见厘舍去";
        default:
          return "不处理";
      }
    },
    // 计算单位金额和个人金额（社保和公积金通用）
    getCompanyAmount(type, record) {
      if (this.onlySocAmount) {
        return this.calculationDot(type, record.amountCompany);
      } else {
        return this.calculationDot(type, NP.strip(record.cardinalityDefault * record.persentCompany * 0.01));
      }
    },
    getPersonAmount(type, record) {
      if (this.onlySocAmount) {
        return this.calculationDot(type, record.amountPersonal);
      } else {
        return this.calculationDot(type, NP.strip(record.cardinalityDefault * record.persentPersonal * 0.01));
      }
    },
    // 计算单位社保总金额和个人总金额
    getCompanyAll() {
      let total = 0;
      if (this.shebao != null) {
        if (this.onlySocAmount) {
          this.shebao.map(item => {
            total += Number(this.calculationDot(this.groupItemDefault, item.amountCompany));
          });
        } else {
          this.shebao.map(item => {
            total += parseFloat(this.calculationDot(this.groupItemDefault, item.cardinalityDefault * item.persentCompany * 0.01));
          });
        }
      }

      return this.calculationDot(this.groupItemDefault, NP.strip(total));
    },

    getPersonAll() {
      var total = 0;
      if (this.shebao != null) {
        if (this.onlySocAmount) {
          this.shebao.map(item => {
            total += Number(this.calculationDot(this.GgroupItemDefault, item.amountPersonal));
          });
        } else {
          this.shebao.map(item => {
            if (item.itemType === 1 || item.itemType === 3) {
              total += parseFloat(this.calculationDot(this.GgroupItemDefault, item.cardinalityDefault * item.persentPersonal * 0.01));
            }
          });
        }
      }

      return this.calculationDot(this.GgroupItemDefault, NP.strip(total));
    },
    // 计算公积金单位总金额和个人总金额
    getPfCompanyAll() {
      let total = 0;
      if (this.jijin != null) {
        if (this.onlySocAmount) {
          this.jijin.map(item => {
            total += Number(this.calculationDot(this.groupItemDefault2, item.amountCompany));
          });
        } else {
          this.jijin.map(item => {
            if (item.itemType === 2) {
              total += parseFloat(this.calculationDot(this.groupItemDefault2, item.cardinalityDefault * item.persentCompany * 0.01));
            }
          });
        }
      }
      return this.calculationDot(this.groupItemDefault2, NP.strip(total));
    },
    getPfPersonAll() {
      let total = 0;
      if (this.jijin != null) {
        if (this.onlySocAmount) {
          this.jijin.map(item => {
            total += Number(this.calculationDot(this.GgroupItemDefault2, item.amountPersonal));
          });
        } else {
          this.jijin.map(item => {
            total += parseFloat(this.calculationDot(this.GgroupItemDefault2, item.cardinalityDefault * item.persentPersonal * 0.01));
          });
        }
      }

      return this.calculationDot(this.GgroupItemDefault2, NP.strip(total));
    },
    // 计算小数点
    calculationDot(type, value) {
      switch (type) {
        case 0: // 不处理
          var s = value.toString().split(".");
          if (s.length === 1) {
            return s + ".00";
          } else {
            if (s[1].length === 1) {
              s[1] = s[1] + "0";
            }
            return s[0] + "." + s[1];
          }
        case 1: // 四舍五入到元
          return this.siWuDot(value, 0);
        case 2: // 四舍五入到角
          return this.siWuDot(value, 1);
        case 3: // 四舍五入到分
          return this.siWuDot(value, 2);
        case 4: // 四舍五入到厘
          return this.siWuDot(value, 3);
        case 5: // 四舍五入到小数点后4位
          return this.siWuDot(value, 4);
        case 6: // 见厘进分
          return this.jieQueDot(value, 2);
        case 7: // 见分进角
          return this.jieQueDot(value, 1);
        case 8: // 见角进元
          return this.jieQueDot(value, 0);
        case 9: // 见角舍去
          return this.sheQuDot(value, 0);
        case 10: // 见分舍去
          return this.sheQuDot(value, 1);
        case 11: // 见厘舍去
          return this.sheQuDot(value, 2);
      }
    },
    // 四舍五入
    siWuDot(value, n) {
      var f = Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
      var s = f.toString();
      var rs = s.indexOf(".");
      if (n !== 0 && rs < 0) {
        s += ".";
      }

      for (var i = s.length - s.indexOf("."); i <= n; i++) {
        s += "0";
      }
      if (n === 0) {
        s += ".00";
      }
      return s;
    },
    // 进1截取
    jieQueDot(value, n) {
      const f = value.toString();
      const s = f.split(".");
      if (s.length === 1) {
        return s + ".00";
      } else {
        if (n !== 0) {
          if (s[1].length > n) {
            const n = Number(s[1].substring(0, n));
            const n2 = n + 1;
            s[1] = n2.toString();
          } else if (s[1].length < n) {
            const c = n - s[1].length;
            for (var i = 0; i < c; i++) {
              s[1] += "0";
            }
          }
          return s[0] + "." + s[1];
        } else {
          const n = Number(s[0]) + 1;
          return n + ".00";
        }
      }
    },
    // 直接舍去
    sheQuDot(value, n) {
      const f = value.toString();
      const s = f.split(".");
      if (s.length === 1) {
        return s + ".00";
      } else {
        if (n !== 0) {
          if (s[1].length > n) {
            s[1] = s[1].substring(0, n);
          } else if (s[1].length < n) {
            const c = n - s[1].length;
            for (var i = 0; i < c; i++) {
              s[1] += "0";
            }
          }
          return s[0] + "." + s[1];
        } else {
          return s[0] + ".00";
        }
      }
    },

    // 查询方案详情
    toInquire() {
      findSocProgRelation({
        progId: this.progId,
        companyId: this.isContainByString("contractAdmin") ? "0" : this.$store.state.hr.companyId
      }).then(res => {
        this.jijin = res.data.socProgItemVOPfList;
        this.shebao = res.data.socProgItemVOSocList;
        this.jijinShow = res.data.payProvidentFund;
        this.progName = res.data.progName;
        this.socCityName = res.data.socCityName;
        this.onlySocAmount = res.data.onlySocAmount;
        this.deductionsDate = res.data.deductionsDate;
        this.userDate = res.data.gmtCreate;
        if (this.jijin != null && this.jijin.length !== 0) {
          // 公积金
          if (this.jijin[0].mantissaProcCompany !== undefined) {
            this.groupItemDefault2 = this.jijin[0].mantissaProcCompany;
          }
          if (this.jijin[0].mantissaProcPersonal !== undefined) {
            this.GgroupItemDefault2 = this.jijin[0].mantissaProcPersonal;
          }
        }
        if (this.shebao != null && this.shebao.length !== 0) {
          if (this.shebao[0].mantissaProcCompany !== undefined) {
            this.groupItemDefault = this.shebao[0].mantissaProcCompany;
          }
          if (this.shebao[0].mantissaProcPersonal !== undefined) {
            this.GgroupItemDefault = this.shebao[0].mantissaProcPersonal;
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.revset {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #fff;
}
.left2 {
  display: flex;
  flex-direction: row;
}
.headback {
  display: flex;
  height: 30px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-title {
  display: flex;
  height: 30px;
  padding-top: 3px;
  padding-top: 5px;
  margin-top: 24px;
  margin-bottom: 24px;
  // background: #fa2855;
  .title-info {
    font-size: 16px;
    color: #252525;
    width: 200px;
    height: 22px;
    margin-right: 10px;
    font-weight: 700;
    padding-left: 15px;
  }
  .title-info:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: auto;
    right: auto;
    height: 20px;
    width: 3px;
    background-color: var(--primary);
  }
}
.header-title-box {
  margin-top: 24px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerTitle {
    display: flex;
    justify-content: flex-start;
    .block {
      width: 3px;
      height: 20px;
      background-color: var(--primary);
      margin-right: 12px;
      margin-top: 2px;
    }
    .title-info {
      font-size: 16px;
      color: #252525;

      font-weight: 700;
    }
  }
}
.totalBox {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-top: 10px;

  .company {
    margin-right: 24px;
  }
  .shebaoTotal {
    margin-right: 24px;
  }
  .text {
    font-size: 14px;
  }
  .number {
    color: var(--primary);
    font-size: 14px;
  }
}
.submit-btn {
  display: flex;
  justify-content: center;
  button {
    margin-right: 10px;
  }
}

.addCursor {
  cursor: pointer;
}

.checkboxWrapper {
  position: absolute;
  z-index: 999;
  background-color: #fff;
  width: 150px;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  padding: 10px 0 10px 10px;
}
</style>
